<template>
	<view>
		<view class="van_top">
			<van-nav-bar title="审核进度" left-arrow @click-left="onClickLeft" />
		</view>
		<view class="content_box">
			<view class="inner">
				<view class="top-step">
					<view class="step">
						<van-steps :steps="steps" :active="active" active-color="#FF1742" inactive-color="#ccc"/>
					</view>
					<view class="ball left"></view>
					<view class="ball right"></view>
				</view>
				<view class="bottom-res" v-if="active == 1">
					<view class="pic">
						<image src="../../static/review/shenhezhong.png" mode="aspectFill"></image>
					</view>
					<view class="title">
						审核中
					</view>
					<view class="sub_title" style="margin-bottom: 352rpx;">
						当前审核门店较多，请耐心等待
					</view>
				</view>
				<view class="bottom-res" v-if="active == 2">
					<view class="pic">
						<image src="../../static/review/shenheshibai.png" mode="aspectFill"></image>
					</view>
					<view class="title">
						审核失败
					</view>
					<view class="sub_title">
						很抱歉，您的认证信息中有部分信息未能通过审批， 请重新提交
					</view>
					<view class="reson">
						失败原因：{{ remark }}
					</view>
					<view class="btn" @click="resetShop">
						重新提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { reqShopInfo } from '@/apis/user.js'
	export default {
		name: "ReviewProgress",
		data() {
			return {
				steps: [{
						text: '提交成功',
						// desc: '描述信息',
					},
					{
						text: '正在审核',
						// desc: '描述信息',
					},
					{
						text: '审核结果',
						// desc: '描述信息',
					},
				],
				active:0,
				type:"" ,// 0审核中 1 审核通过 2 审核失败
				remark:""
			}
		},
		onLoad(params) {
			this.type = params.type
			this.remark = params.remark;
			if(this.type == "0"){
				this.active = 1;
			}else if(this.type == "2"){
				this.getRemark();
				this.active = 2;
			}
		},
		methods: {
			onClickLeft() {
				uni.navigateBack();
			},
			resetShop(){
				uni.navigateTo({url:"/packageA/pages/addShop/addShop?type=2"})
			},
			async getRemark(){
				let res = await reqShopInfo();
				if (res.code === 200) {
				  let { remark } = res.data;
				  this.remark = remark;
				}
			}
			
		},
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.content_box {
		padding: 24rpx;
		

		.inner {
			border-radius: 12rpx;
			.top-step {
				padding: 24rpx;
				position: relative;
				border-bottom: 1px dashed #ccc;
				.step {
					margin-bottom: 34rpx;
				}
				.ball {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					background-color: #f5f5f5;
					border-radius: 50%;
				}
				.left {
					bottom: -16rpx;
					left: -16rpx;
				}
				.right {
					bottom: -16rpx;
					right: -16rpx;
				}
			}
			background-color: #fff;
			
			.bottom-res {
				padding:0 24rpx;
				padding-top: 96rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.pic {
					width: 154rpx;
					height: 134rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.title {
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					height: 56rpx;
					line-height: 56rpx;
					margin: 24rpx 0;
				}
				.sub_title {
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
					line-height: 40rpx;
					margin-bottom: 16rpx;
				}
				.reson{
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}
				.btn {
					width: 100%;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 60rpx;
					height: 60rpx;
					background: linear-gradient( 90deg, #FF4F30 0%, #FF1642 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin: 96rpx 0;
				}
			}
		}
	}
</style>